// src/components/work/RolesPage.tsx
import { Col, Layout, Row } from 'antd';
import React from 'react';
import '../styles/WorkPage.scss';
import WorkHeader from '../work/common/WorkHeader';
import WorkSidebar from '../work/common/WorkSidebar';
import MembersTable from '../work/RolesPage/MembersTable';
import RolesSidebar from '../work/RolesPage/RolesSidebar';
const { Header, Content, Sider } = Layout;

const RolesPage: React.FC = () => {
  return (
    <Layout className="workPage-body" style={{ backgroundColor: '#fff' }}>
      <Sider width={50} className="workPage-sider" style={{ backgroundColor: '#fff' }}>
        <WorkSidebar />
      </Sider>
      <Layout style={{ backgroundColor: '#fff' }}>
        <Header className="workPage-header" style={{ backgroundColor: '#fff', padding: 0, height: 50 }}>
          <WorkHeader />
        </Header>
        <Content style={{ backgroundColor: '#fff', padding: 0, margin: 0 }}>
          <div className="workPage-content">
            <Row>
              <Col span={4}>
                <div className="workPage-main-left" style={{ backgroundColor: '#fff' }}>
                  <RolesSidebar />
                </div>
              </Col>
              <Col span={20} className="workPage-column">
                <div className="workPage-main-left" style={{ backgroundColor: '#fff' }}>
                  <MembersTable />
                </div>
              </Col>
            </Row>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default RolesPage;
